function Index() {

}

Index.prototype.run = function () {
    var self = this;
    self.listenNewWarnEvent();
};

// 屏幕尺寸变化,刷新页面
$(window).resize(function () {
    window.location.reload();
});

// 首页预警点击图片预览
function view_image(id) {
    layui.use(['layer'], function () {
        var layer = layui.layer;
        $.ajax({
            type: 'get',
            url: '/public/index_warn/',
            data: {
                'id': id
            },
            success: function (result) {
                if (result['code'] === 200) {
                    var data = result['data'];
                    // let image_sign = eval(data['image_sign']);
                    let image_url = data['image'];
                    json_data = {
                        'data': [
                            {'src': image_url}
                        ]
                    };
                    layer.photos({
                        photos: json_data,
                        anim: 5
                    });
                    // layer.open({
                    //     type: 1,
                    //     title: '查看图片',
                    //     content: $('#view-image'),
                    //     area: ['1550px', '920px'],
                    //     scrollbar: false,
                    //     success: function (param) {
                    //         var canvas = document.getElementById("canvasId");
                    //         var ctx = canvas.getContext("2d");
                    //         var img = new Image();
                    //         img.src = image_url;
                    //         img.onload = function () {
                    //             canvas.width = 1550;
                    //             canvas.height = 870;
                    //             ctx.strokeStyle = "#f00";
                    //             ctx.lineWidth = '5';
                    //             ctx.lineHeight = '5';
                    //             ctx.drawImage(img, 0, 0, 1920 * 0.8, 1080 * 0.8);
                    //             ctx.strokeRect(image_sign[0] * 0.8, image_sign[1] * 0.8, image_sign[2] * 0.8, image_sign[3] * 0.8);
                    //         }
                    //     }
                    // })
                } else {
                    return
                }
            },
            error: function () {
                return
            }
        });
    });
}

// 定时异步刷新主页右上方最新预警信息
Index.prototype.listenNewWarnEvent = function () {
    $(function () {
        warn();
        setInterval(function () {
            warn();
            var ChangeWarn = $('#change-warn');
            ChangeWarn.empty(); // 再次刷新前 先移除dom
        }, 10000);
    });

    function warn() {
        $.ajax({
            type: 'get',
            url: '/public/index_warn/',
            data: {},
            success: function (result) {
                if (result['code'] === 200) {
                    var data = result['data'].slice(0,4);
                    var html = template('index-warn', {
                        'data': data
                    });
                    document.getElementById('change-warn').innerHTML = html;
                } else {
                    return
                }
            },
            error: function () {
                return
            }
        });
    }
};

$(function () {
    var index = new Index();
    index.run();
});


// 首页左下角柱状图时间筛选
$(function () {
    var timeBtn = $('#time1');
    timeBtn.click(function () {
        layui.use(['layer', 'laydate'], function () {
            var layer = layui.layer,
                laydate = layui.laydate;
            layer.open({
                resize: false,
                type: 1,
                title: '筛选时间',
                content: $('#layer-time'),
                // offset: ['100px', '500px'],
                area: ['600px', '500px'],
                btn: ['确认', '取消'],
                success: function (layero, index) {
                    laydate.render({
                        elem: '#times',
                        range: true,
                        done: function (value) {
                            times = value;
                        }
                    });
                },
                yes: function (index) {
                    if (times.length != 0) {

                        echarts.dispose(document.getElementById("echarts-line3")); // 再次加载时 刷新dom
                        var myChart = echarts.init(document.getElementById('echarts-line3'), 'demo');
                        $.ajax({
                            type: 'get',
                            url: '/public/index_time/',
                            data: {
                                'times': times
                            },
                            success: function (result) {
                                if (result['code'] === 200) {
                                    var data = result['data'];
                                    myChart.setOption(
                                        {
                                            legend: {},
                                            tooltip: {},
                                            dataset: {
                                                // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                                                // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
                                                dimensions: ['product', '已完成', '已丢弃'],
                                                source: data
                                            },
                                            xAxis: {
                                                type: 'category',
                                                name: ''
                                            },
                                            yAxis: {
                                                name: ''
                                            },
                                            series: [{
                                                type: 'bar'
                                            },
                                                {
                                                    type: 'bar'
                                                }
                                            ],
                                            dataZoom: [
                                                {
                                                    type: 'inside',
                                                    filterMode: 'filter',
                                                    show: true,
                                                    start: 0,
                                                    end: 30,
                                                    handleSize: 10
                                                },
                                            ],
                                            grid: {
                                                left: '2%',
                                                right: '2%',
                                                bottom: '2%',
                                                containLabel: true
                                            },
                                            color: ['#39CF78', '#E6B600']
                                        }
                                    )
                                } else {
                                    layer.alert(result['message']);
                                }
                            }
                        });

                    } else if (times.length == 0) {
                        parent.location.reload();
                    }
                    layer.close(index);
                }
            });
        })
    });
});


// 首页右下角柱状图时间筛选
$(function () {
    var timeBtn = $('#time2');
    timeBtn.click(function () {
        layui.use(['layer', 'laydate'], function () {
            var layer = layui.layer,
                laydate = layui.laydate;
            layer.open({
                resize: false,
                type: 1,
                title: '筛选时间',
                content: $('#layer-time'),
                // offset: ['100px', '500px'],
                area: ['600px', '500px'],
                btn: ['确认', '取消'],
                success: function (layero, index) {
                    laydate.render({
                        elem: '#times',
                        range: true,
                        done: function (value) {
                            times = value;
                        }
                    });
                },
                yes: function (index) {
                    if (times.length !== 0) {
                        echarts.dispose(document.getElementById("echarts-column3")); // 再次加载时 刷新dom
                        var myCharts = echarts.init(document.getElementById('echarts-column3'), 'demo');
                        $.ajax({
                            type: 'get',
                            url: '/public/index_times/',
                            data: {
                                'times': times
                            },
                            success: function (result) {
                                if (result['code'] === 200) {
                                    var data = result['data'];
                                    myCharts.setOption(
                                        {
                                            legend: {},
                                            tooltip: {},
                                            dataset: {
                                                // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                                                // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
                                                dimensions: ['product', '周界入侵', '周界入侵'],
                                                source: data
                                            },
                                            xAxis: {
                                                type: 'category',
                                                name: ''
                                            },
                                            yAxis: {
                                                name: ''
                                            },
                                            series: [{
                                                type: 'bar'
                                            },
                                                {
                                                    type: 'bar'
                                                }
                                            ],
                                            dataZoom: [
                                                {
                                                    type: 'inside',
                                                    filterMode: 'filter',
                                                    show: true,
                                                    start: 0,
                                                    end: 30,
                                                    handleSize: 10
                                                },
                                            ],
                                            grid: {
                                                left: '2%',
                                                right: '2%',
                                                bottom: '2%',
                                                containLabel: true
                                            },
                                            color: ['#00A5ED', '#7FB800']
                                        }
                                    )
                                } else {
                                    layer.alert(result['message']);
                                }
                            }
                        });

                    } else{
                        layer.close(index);
                        parent.location.reload();
                    }
                    layer.close(index);
                }
            });
        })
    });
});
